<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="materialIdVisible"
    :fullscreen="true"
    :before-close="handleClose"
    width="90%"
  >
    <template slot="title">
      <div :style="titleColor">新增</div>
    </template>
    <el-form
      ref="dataForm"
      :model="dataForm"
      label-position="left"
      label-width="100px"
      :rules="rules"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="单号" class="required" prop="fbillno">
            <el-input v-model="dataForm.fbillno" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请时间" class="required" prop="forddate">
            <el-date-picker
              v-model="dataForm.forddate"
              type="datetime"
              placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计完成时间" class="required" prop="foverdate">
             <el-date-picker
              v-model="dataForm.foverdate"
              type="datetime"
              placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="委托客户" class="required" prop="fsupno">
            <el-select v-model="dataForm.fsiteNo" placeholder="请选择">
              <el-option
                v-for="item in fsiteNoBelongOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="委托人" class="required" prop="forduser">
            <el-select v-model="dataForm.forduser" placeholder="请选择">
              <el-option
                v-for="item in getListSpeakerId"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="受理人" class="required" prop="frecuser">
            <el-select v-model="dataForm.frecuser" placeholder="请选择">
              <el-option
                v-for="item in getListSpeakerId"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="品项数" class="required" prop="fitemcount">
            <el-input v-model="dataForm.fitemcount"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总件数" class="required" prop="fpiececount">
            <el-input v-model="dataForm.fpiececount"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总价" class="required" prop="ftotalamt">
            <el-input v-model="dataForm.ftotalamt"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="备注">
            <el-input v-model="dataForm.fexplanation"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单据状态" class="required" prop="fsupno">
            <el-select v-model="test" placeholder="请选择">
              <el-option
                v-for="item in statuslist"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs style="width: 100%" type="border-card">
      <el-tab-pane label="样品列表">
        <div class="app-container">
          <el-table :data="list" element-loading-text="正在查询中。。。" border>
                <el-table-column align="left" label="行号" type="index" width="50" />
                <el-table-column align="left" label="样品标签" prop="f1" />
                <el-table-column align="left"  label="样品名称" prop="f2" />
                <el-table-column align="left" label="化验状态" prop="f3" />
                <el-table-column align="left" label="化验时间" prop="f4" width="200"/>
                <el-table-column align="left" label="化验人员" prop="f5" />
                <el-table-column align="left" label="化验报告" prop="" width="120">
                  <template slot-scope="scope">
                      <el-button type="parmiy">查看详情</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="校对状态" prop="" />
                <el-table-column align="left" label="校对人员" prop="" />
                <el-table-column align="left" label="校对时间" prop="" />
                <el-table-column align="left" label="校对" prop="" >
                  <template slot-scope="scope">
                      <el-button type="parmiy">校对</el-button>
                  </template>
                </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="sigbut">
         <div class="tip">请在这里输入你的签名</div>
         <div class="left-bu">
            <el-button class="clear-bu" size="mini" @click="handleReset">清空</el-button>
            <el-button class="sure" size="mini" @click="handleGenerate" :disabled="!showSig">确定签名
            </el-button>
          </div>
    </div>
    <div class="online-sig">
        <vue-esign
          ref="esign"
          :width="800"
          :height="300"
          :isCrop="isCrop"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
          :bgColor.sync="bgColor"
          v-if="showSig"
        />
        <img :src="resultImg" alt="" v-if="!showSig" class="sig-img" />
      </div>
    <div slot="footer" class="dialog-footer">
        <el-button
          :style="{
            background: buttonColor.cancel,
            color: buttonColor.colorone,
          }"
          round
          @click="handleClose"
          size="medium"
          >取消</el-button
        >
        <el-button
          :style="{ background: buttonColor.confirm, color: buttonColor.color }"
          round
          @click="UpdateorCreate"
          size="medium"
          >{{ modify == 1 ? "新增" : "修改" }}</el-button
        >
      </div>
      <!-- <Tabs ref="Tabs" @materialDialog="materialDialogValue"/> -->
  </el-dialog>
</template>

<script>
import {
  tableColor,
  titleColor,
  exportColor,
  buttonColor,
} from "@/filters/index";
import vueEsign from "vue-esign";
import Tabs from "./Tabs.vue"
import { create, update} from "@/api/sample/inspection";
import {getFbillno} from "@/api/area";
export default {
  name: "tabs",
  props:["getListSpeakerId"],
  components:{Tabs,vueEsign},
  data() {
    return {
      buttonColor,
      titleColor,
      lineWidth: 6,
      lineColor: "#000000",
       bgColor: "",
      resultImg: "",
      isCrop: false,
      showSig: true,
      modify:1,
      list: [
        {
          f1:'13-1',
          f2:'通风柜sp500',
          f3:'进行中',
          f4:"2023-06-12 17:21:46",
          f5:"刘备",
          f6:"达标",
          f7:"20"
        },
        {
          f1:'13-2',
          f2:'温控盒100',
          f3:'未开始',
          f4:"",
          f5:"刘备",
          f6:"",
          f7:"20"
        }
      ],
      test:1,
      statuslist:[
        {value:1,label:'质检申请'},
        {value:2,label:'进行中'},
        {value:3,label:'未开始'},
      ],
      dataForm: {
         fsiteNo: this.$store.state.user.fsiteNo
        ,fbillno:undefined
        ,fsite_no:undefined
        ,fsupno:undefined
        ,forduser:undefined
        ,forddate:new Date()
        ,foverdate:new Date()
        ,frecuser:undefined
        ,frecdate:new Date()
        ,fitemcount:0
        ,fpiececount:0
        ,ftotalamt:undefined
        ,fexplanation:undefined
        ,fupddate:new Date()
        ,foperator:undefined
        ,fcheckdate:new Date()
        ,fcheckuser:undefined
        ,fbillstate:undefined
      },
      fsiteNoBelongOptions:[],
      materialIdVisible:false,
      rules:{
         fclassstname:[{required: true, message: '不能为空' }]
        ,fsupno:[{required: true, message: '不能为空' }]
        ,forduser:[{required: true, message: '不能为空' }]
        ,forddate:[{required: true, message: '不能为空' }]
        ,ftotalamt:[{required: true, message: '不能为空' }]
        ,foverdate:[{required: true, message: '不能为空' }]
        ,frecuser:[{required: true, message: '不能为空' }]
        ,frecdate:[{required: true, message: '不能为空' }]
        ,fitemcount:[{required: true, message: '不能为空' }]
        ,fpiececount:[{required: true, message: '不能为空' }]
      },
    };
  },
  created() {
    this.getrequsternumber();
        // this.getcustom();
  },
  methods: {
    // 清空画布
    handleReset() {
      this.resultImg = "";
      this.showSig = true;
      this.$nextTick(() => {
        this.$refs.esign.reset();
      });
    },
    handleGenerate() {
      this.$refs.esign.generate().then(res => {
        if (res) {
          this.showSig = false;
          this.resultImg = res;
        }
      }).catch(err => {
        this.$message({
          message: '请签名',
          type: 'warning'
        });
      })
    },
    handleClose() {
      this.$refs["dataForm"].resetFields();
     this.materialIdVisible = false;
    },
    //客户列表
    getcustom() {
      fsiteOptionsByLevel(3)
        .then((response) => {
          this.fsiteNoBelongOptions = response.data.data.list;
        })
        .catch(() => {
          this.fsiteNoBelongOptions = [];
        });
    },
    opentabs(row){
      // this.list=row.details;
      if(row==undefined)
      {
        this.modify=1;
      }
      else
      {
        this.modify=2
        this.dataForm=row;
        this.dataForm.fsiteNo=this.$store.state.user.fsiteNo;
      }
        this.materialIdVisible = true;
    },
    //获取单号
    getrequsternumber(){
      getFbillno({ flag: 2017 })
          .then((response) => {
            if (response) {
              this.dataForm.fbillno = response.data.data
            }
          })
          .catch(() => {
            this.dataForm.fbillno = ''
          })
    },
    //新增、修改
    UpdateorCreate() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
             var formMethod = this.modify == 1 ? create : update;
          formMethod(this.dataForm)
            .then((res) => {
              this.$notify.success({
                title: "成功",
                message: "存储资料成功",
              });
              this.$refs["dataForm"].resetFields();
              this.materialIdVisible = false;
            })
            .catch((res) => {
              this.$notify.error({
                title: "失败",
                message: "存储资料失败",
              });
            });
          }
        })
    },
  },
};
</script>
<style>
.fromiput input{
  width: 85% !important;
}
.selectdiv{
 position: relative;
}
.selectico{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
}
.sigbut{
  margin: 20px 0;
}
.online-sig{
  border: 1px solid #999;
}
</style>